@use "sass:map";
@use "sass:color";
@import "./pytch-mixins.scss";
@import "./pytch-variables.scss";
@import "./pytch-jr-common.scss";
@import "../node_modules/bootstrap/scss/bootstrap";

////////////////////////////////////////////////////////////////////////

.abs-0000,
.abs-0000-oflow {
  position: absolute;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
}

.abs-0000-oflow {
  overflow: auto;
}

////////////////////////////////////////////////////////////////////////

@mixin border-and-label-bg($colour) {
  border-color: $colour;
  .label {
    background-color: $colour;
  }
}

////////////////////////////////////////////////////////////////////////

.Junior-IDEContents {
  margin: $ide-gap;

  // If the sprites list is allowed to get too short, the "+" button
  // ends up being positioned outside the panel.  If we impose a minimum
  // height on the sprites list, the height of the coding area doesn't
  // expand to match.  So impose a minimum height on the whole thing.
  min-height: 40rem;

  @include grid-hstack-three(
    $activity-bar-width,
    minmax($min-actor-properties-width, 1fr),
    auto
  );

  // The special-casing for each type of activity is a bit clunky but
  // it will do for now.

  &.activity-content-expanded-lesson {
    @include grid-hstack-four(
      $activity-bar-width,
      minmax($min-lesson-column-width, 1fr),
      minmax($min-actor-properties-width, 1fr),
      auto
    );
  }

  &.activity-content-expanded-helpsidebar {
    @include grid-hstack-four(
      $activity-bar-width,
      $help-sidebar-content-width,
      minmax($min-actor-properties-width, 1fr),
      auto
    );
  }
}

.Junior-LessonContent-container {
  display: grid;
  grid-template-rows: auto 1fr;

  .Junior-LessonContent-inner-container {
    position: relative;
  }
}

////////////////////////////////////////////////////////////////////////

.ActivityBar {
  background-color: $secondary-bg-color;
  .ActivityBarTab {
    position: relative;
    @include align-center-middle();
    user-select: none;
    cursor: pointer;
    width: 100%;
    height: $activity-bar-tab-height;
    font-size: 1.5rem;
    color: $inactive-icon-option-color;
    transition: color 0.15s ease-in-out;
    &:hover {
      color: $pytch-colour-accent-blue;
    }
    &.isActive {
      color: $pytch-colour-main-blue;
    }
    > .tabkey-tooltip {
      position: absolute;
      z-index: 1;
      width: max-content;
      padding: 0px 0.5rem;
      left: calc($activity-bar-width - 0.25rem);
      font-size: 0.9rem;
      background-color: white;
      color: black;
      border: 1px solid $inactive-text-option-color;
      transition-property: opacity;
      visibility: hidden;
      opacity: 0;
    }
    .tabkey-icon:hover + .tabkey-tooltip {
      transition-delay: 0.8s;
      transition-duration: 0.15s;
      visibility: visible;
      opacity: 1;
    }
  }
}

.ActivityContent-container {
  position: relative;
  margin-left: -$ide-gap;
  border-left: 1px solid $panel-divider-color;
}

.ActivityContent {
  > .HelpSidebar {
    padding: 1rem;
    background-color: $main-bg-color;
    height: 100%;
    overflow: auto;
  }
  > .Junior-LessonContent-container {
    height: 100%;
  }
}

////////////////////////////////////////////////////////////////////////

.Junior-EditorAndInfo {
  @include min-dimens-zero();
  @include grid-vstack-two(2fr, 1fr);

  border-left: $panel-divider-border-spec;

  &.infoPanelIsCollapsed {
    @include grid-vstack-two(1fr, auto);
  }
}

.Junior-StageAndActorsList {
  @include min-dimens-zero();
  @include grid-vstack-two(auto, 1fr);

  border-left: $panel-divider-border-spec;

  .StageWithControls {
    background-color: white;
    padding: 6px;
  }
}

////////////////////////////////////////////////////////////////////////

.Junior-InfoPanel-container,
.Junior-ActorProperties-container {
  background-color: $panel-background;
  ul.nav {
    border-bottom-color: $secondary-bg-color;
    background-color: $secondary-bg-color;
  }
  button.nav-link {
    padding-top: 2px;
    padding-bottom: 2px;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    color: $inactive-text-option-color;
    &.active {
      border-bottom-color: $panel-background;
      background-color: $panel-background;
      color: black;
    }
  }
}

.Junior-ActorProperties-container {
  @include min-dimens-zero();
  @include grid-vstack-two(auto, 1fr);
  position: relative;

  .tab-content {
    overflow: auto;
    position: relative;
  }

  .AppearancesTabTitle {
    display: grid;
    .title-option {
      grid-column: 1 / 2;
      grid-row: 1 / 2;
      visibility: hidden;
    }
    .title-option.isActive {
      visibility: visible;
    }
  }
}

.busy-overlay {
  visibility: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;

  &.actionInProgress {
    margin: auto;
    visibility: visible;
    opacity: 0.6;
    background-color: #888;
    color: white;
  }

  .spinner-container {
    margin: auto;
    text-align: center;
    transform: scale(2);
  }
}

.Junior-InfoPanel-container {
  @include min-dimens-zero();
  @include grid-vstack-two(auto, 1fr);
  position: relative;
  border-top: $panel-divider-border-spec;

  button.collapse-or-expand-button {
    position: absolute;
    top: 1px;
    right: 4px;
    padding: 0px 8px;
  }

  &.isCollapsed {
    row-gap: 0px;
    .tab-content {
      display: none;
    }
  }

  .tab-content {
    overflow: auto;
  }
}

////////////////////////////////////////////////////////////////////////

.Junior-ActorsList-container {
  position: relative;
  background-color: $panel-background;
  border-top: $panel-divider-border-spec;

  .ActorsList {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-content: flex-start;

    margin-top: 0.5rem;
  }
}

.Junior-CodeEditor {
  > * {
    @include min-dimens-zero();
    overflow: auto;
  }
}

////////////////////////////////////////////////////////////////////////

.Junior-AssetsList {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-content: flex-start;

  margin-top: 0.5rem;
}

////////////////////////////////////////////////////////////////////////

.Junior-AssetsList > .AssetCard,
.ActorCard {
  .drag-masked-card {
    display: grid;
    > * {
      grid-column: 1 / 2;
      grid-row: 1 / 2;
    }
  }

  cursor: pointer;
  user-select: none;
  position: relative;

  padding: 0.5rem;
  margin: 0.5rem;
  border-radius: 6px;

  &.isDragging {
    opacity: 33%;
    .dropdown {
      visibility: hidden;
    }
  }

  &.hasDragItemOver {
    background-color: $focused-item-background-glow;
    .drag-mask {
      background-color: $focused-item-background-glow;
      opacity: 75%;
    }
    .dropdown {
      visibility: hidden;
    }
  }

  background-color: transparent;

  &.isFocused {
    background-color: $focused-item-background-glow;
  }

  .dropdown {
    border-radius: 4px;

    position: absolute;
    right: 0rem;
    top: 0rem;

    button {
      padding: 0.25rem;
      font-size: 0.6667rem;
    }
  }

  .AssetCardContent,
  .ActorCardContent {
    position: relative;
    display: flex;
    flex-direction: column;
    border: 3px solid;
    border-radius: 2px;
    background-color: white;

    .label {
      padding: 0.25rem;
      font-size: 0.875rem;
      text-align: center;
      color: white;
      overflow-x: hidden;
      text-overflow: ellipsis;
      margin: 0px;

      pre {
        margin: 0px;
      }
    }
  }

  &.kind-stage .AssetCardContent,
  &.kind-stage .ActorCardContent {
    @include border-and-label-bg($stage-card-background);
  }

  &.kind-sprite .AssetCardContent,
  &.kind-sprite .ActorCardContent {
    @include border-and-label-bg($sprite-card-background);
  }

  // Specify size of different card kinds separately.
  .ActorCardContent {
    width: 7rem;
    height: 8rem;
  }

  &.ActorCard .dropdown {
    display: none;
    right: -0.5rem;
    top: -0.5rem;
  }

  &.ActorCard.isFocused .dropdown {
    display: block;
  }

  .AssetCardContent {
    width: 11rem;
    height: 11rem;
  }

  .thumbnail {
    flex-grow: 1;
    min-height: 1px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: #ddd;

    .asset-preview {
      text-align: center;
      font-size: 0.75rem;
    }
  }
}

// TMP: Will fold this into above once drag/drop working for Sprites
// too.
.Junior-AssetsList > .AssetCard {
  cursor: grab;
}

////////////////////////////////////////////////////////////////////////

.NoContentHelp {
  margin: 2rem 3rem 1rem;
}

////////////////////////////////////////////////////////////////////////

.AddSomethingButtonStrip-blur-container {
  display: grid;
  position: sticky;
  right: 0px;
  bottom: 0px;
  margin-bottom: 0px;
  z-index: 1;

  > * {
    grid-area: 1 / 1 / 2 / 2;
  }

  .AddSomethingButtonStrip-blur {
    background-color: $main-bg-color;
    opacity: 0.6;
  }

  .AddSomethingButtonStrip {
    margin-bottom: 0px;
    z-index: 1;
  }
}

.AddSomethingButtonStrip {
  margin-bottom: 3rem;
  display: flex;
  flex-direction: row;
  justify-content: right;

  .AddSomethingButton {
    span.label {
      margin-left: 1rem;
      margin-right: 0px;
      font-size: 1rem;
    }

    cursor: pointer;
    user-select: none;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    height: 2.5rem;
    margin: 1rem;

    &.add-script {
      @include background-color-as-button($scratch-hat-block-background);
    }
    &.add-sprite,
    &.add-sprite-asset {
      @include background-color-as-button($sprite-card-background);
    }
    &.add-stage-asset {
      @include background-color-as-button($stage-card-background);
    }

    color: white;
    border-radius: 0.75rem;

    span.icon {
      font-size: 1rem;
      margin-left: 0.75rem;
      margin-right: 0.75rem;
    }
  }
}

////////////////////////////////////////////////////////////////////////

.UpsertSpriteModal {
  .modal-title {
    overflow-x: hidden;
    text-overflow: ellipsis;
  }
  .validity-assessment {
    p {
      min-height: 3rem;
    }
    &.valid {
      visibility: hidden;
    }
  }
}

////////////////////////////////////////////////////////////////////////

.UpsertHandlerModal li .bump,
.HatBlock .bump {
  background-color: $scratch-hat-block-background;
  width: 6rem;
  height: 1.1111rem;
  transform: translateY(0.3333rem);
  border-top-left-radius: 50% 100%;
  border-top-right-radius: 50% 100%;
}

.HatBlock {
  cursor: grab;
  .body {
    // Ensure z-stacking is correct:
    position: relative;

    background-color: $scratch-hat-block-background;
    padding: 0.25rem 0rem;
    border-top-right-radius: $hat-block-TR-radius;
    border-top-left-radius: 6px;

    display: flex;
    flex-direction: row;
    align-items: center;

    .content {
      flex-grow: 1;
      margin-left: 0.5rem;
      color: white;
    }

    .reorder-buttons {
      display: flex;
      flex-direction: row;
      button {
        display: block;
        margin-right: 1rem;
        font-size: 0.75rem;
        padding: 1px 4px;
      }
      button[disabled] {
        visibility: hidden;
      }
      visibility: hidden;
    }

    &:hover .reorder-buttons {
      visibility: visible;
    }

    .dropdown {
      margin-right: 1rem;
      button {
        display: block;
        padding: 0px 6px 0px 2px;
        font-size: 0.875rem;
      }
    }
  }

  .message-placeholder,
  .message-content {
    display: inline-block;
    min-width: 5rem;
    background-color: white;
    color: black;
    font-family: $monospace-fonts;
    padding: 0px 0.5rem;
    border-radius: 4px;
    margin: 0px 0.125rem;
  }

  .message-placeholder {
    color: white;
  }

  .key-content {
    display: inline-block;
    min-width: 2rem;
    background-color: darken($secondary, 10);
    color: white;
    padding: 0px 0.5rem;
    border-radius: 4px;
    margin: 0px 0.125rem;
  }
}

.PytchScriptEditor {
  margin: 1rem;

  .hat-code-spacer {
    height: 0.5rem;
    background-color: white;
  }

  .drag-masked-editor {
    display: grid;
    > * {
      grid-column: 1 / 2;
      grid-row: 1 / 2;
    }
  }

  &.isDragging {
    .drag-masked-editor .drag-mask {
      z-index: 5;
      background-color: #ddd;
      opacity: 0.8;
    }
    .HatBlock {
      .body,
      .bump {
        background-color: #bbb;
      }
      .body .dropdown button {
        visibility: hidden;
      }
    }
  }

  &.hasDragItemOver {
    .drag-masked-editor .drag-mask {
      z-index: 5;
      background-color: $focused-item-background-glow;
      opacity: 0.8;
    }
    .HatBlock {
      .body,
      .bump {
        background-color: $focused-item-background-glow;
      }
      .body .dropdown button {
        visibility: hidden;
      }
    }
  }
}

////////////////////////////////////////////////////////////////////////

$key-chooser-width: 54rem;

.KeyChoiceModal {
  .modal-dialog {
    max-width: $key-chooser-width;
  }

  .modal-content {
    width: $key-chooser-width;

    .keyboard {
      display: flex;
      flex-direction: column;
      .key-row {
        display: flex;
        flex-direction: row;
        justify-content: center;
      }
    }

    .KeyOption {
      margin: 0.25rem;
      font-size: 1.25rem;
      width: 2.75rem;

      &.spacebar {
        width: 8rem;
      }

      background-color: darken($secondary, 10);
      &:hover {
        background-color: darken($primary, 5);
      }
      &.isSelected {
        background-color: lighten($primary, 5);
      }
    }
  }
}

////////////////////////////////////////////////////////////////////////

.UpsertHandlerModal {
  ul {
    &:focus {
      outline: none;
    }
    list-style: none;
    padding-left: 0px;
    li {
      cursor: pointer;
      user-select: none;
      padding: 0.25rem;
      margin: 0.25rem 0rem;
      border-radius: 0.5rem 0.5rem 0rem 0rem;
      background-color: transparent;
      &.chosen {
        background-color: $focused-item-background-glow;
      }
      .content {
        font-size: 0.925rem;
        border-top-left-radius: 6px;
        border-top-right-radius: $hat-block-TR-radius;
        padding: 0.25rem;
        background-color: $scratch-hat-block-background;
        color: white;
        input {
          display: inline-block;
          height: 1.5rem;
          width: 12rem;
          margin: 0px 0.25rem;
          padding: 0px 0.125rem;
          font-family: $monospace-fonts;
        }
      }
    }
    li.chosen {
      input.isEmpty {
        background-color: var(--bs-warning-bg-subtle);
        font-style: italic;
        color: var(--bs-gray-700);
      }
      input.isEmpty.showEmptyMessageError {
        background-color: var(--bs-danger-bg-subtle);
      }
    }
    li.empty-message-hint {
      padding: 0px;
      margin: 0px;
      color: var(--bs-danger);
      font-style: italic;
      visibility: hidden;
      &.showEmptyMessageError {
        visibility: visible;
      }
    }
  }

  .KeyEditor {
    display: inline-block;
    margin: 0rem 0.25rem;

    span.key-button,
    span.edit-button {
      display: inline-block;
      padding: 0rem 0.25rem;
      min-width: 2rem;
      text-align: center;
      border-radius: 6px;
    }

    span.key-button {
      background-color: $secondary;
      color: white;
      &:hover {
        background-color: $primary;
      }
      position: relative;
      span.dropdown-indicator {
        margin-left: 1rem;
      }
    }
  }
}

////////////////////////////////////////////////////////////////////////

.help-sidebar .spinner-container,
.HelpSidebar .spinner-container,
.Junior-LessonContent-container .spinner-container {
  @include full-height-grid-center-center;
  color: #444;
}
